• 什麼是Mockup?和Wireframe的差別?

　　　Mockup的中文名稱叫做視覺高保真設計，和Wireframe的差別在於，它不僅包含介面元素的位置、大小和排列，還包括了顏色、字體、圖標等視覺元素。

你可以將Sketching、Wireframe和Mockup這三種設計圖想象成製作一道菜的流程。Sketching就像是在烹飪前準備食材、調味料和所需材料的階段，它是設計的初步概念。Wireframe則相當於整個烹飪的過程，是設計的細節和架構。Sketching和Wireframe通常都是黑白的，因為它們還不是最終成品，只是設計的藍圖。而Mockup則類似於菜品完成後的擺盤階段，這是設計的最終呈現，會使用彩色來展示最終成品的外觀和風格。

• UI/UX實例分析:打卡系統<實作Mockup>

在開始實作Mockup前，先讓我來介紹Figma的一個小功能，Community社群:

介紹完畢，那就讓我們進入今天的正題吧!

• 打開昨天做的Wirframe設計檔，以下開始實作Mockup:

• 這裡附上實作連結供大家參考。

• 結論

　　　經過這幾天的實作練習，相信大家對Figma這個工具已經變得更加熟悉了！特別是對於初學者而言，如果你想培養設計的美感，我建議平時多參考別人的設計來獲得靈感，但除了觀摩，也別忘了親自動手實作喔！這樣才能真正加深對不同設計的理解和印象。如果一開始你不知如何下手，可以嘗試模仿別人的設計來磨練Figma的技能。透過不斷的實作，隨著時間的累積，你就會自然而的培養出對介面設計的美感和創意了！

那今天就到這裡囉!明天會接續使用Figma，教大家如何在Figma中建立動畫。